<template>
  <ul class="mc-list">
    <li 
      v-for="item in data" 
      :key="item.value" 
      class="mc-list-item"
      :class="{ 'active': item.active }"
      @click="$emit('select', item)"
    >
      {{ item.label }}
    </li>
  </ul>
</template>

<script setup lang="ts">
defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});

defineEmits(['select']);
</script>

<style scoped>
.mc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 120px;
  max-height: 300px;
  overflow-y: auto;
  background-color: var(--devui-base-bg, #ffffff);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.mc-list-item {
  padding: 8px 16px;
  font-size: 14px;
  color: var(--devui-text, #252b3a);
  cursor: pointer;
  transition: background-color 0.3s;
}

.mc-list-item:hover {
  background-color: var(--devui-list-item-hover-bg, #f2f5fc);
}

.mc-list-item.active {
  background-color: var(--devui-list-item-active-bg, #e9edfa);
  color: var(--devui-brand, #5e7ce0);
}
</style> 